<template>
  <div class="set-up-wrapper">
    <!-- 提示信息 -->
    <div class="set-up-tip">
      <i class="iconfont icon-tishi"></i>
      <span>提示：此组件只显示参加报名/发布创意的图片 页面只会出现一张图片，按照是否报名来判断！</span>
    </div>
    <!-- 图片设置 -->
    <div class="set-up-item">
      <div class="set-up-title">{{ enrollImage.title }}</div>
      <div class="set-up-content">
        <div class="set-up-tips mb20">{{ enrollImage.tips }}</div>
        <div class="set-up-upload">
          <div class="upload-txt">上传图片</div>
          <div class="upload-img" @click="modalEnrollPicTap">
            <i v-if="!enrollImage.img" class="iconfont icon-shangchuan1"></i>
            <img v-else :src="enrollImage.img" alt="" class="img" />
          </div>
          <!-- 明确的上传按钮 -->
          <div class="upload-button-container">
            <el-button size="small" type="primary" @click="modalEnrollPicTap">选择文件</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 创意图片设置 -->
    <div class="set-up-item">
      <div class="set-up-title">{{ creativeImage.title }}</div>
      <div class="set-up-content">
        <div class="set-up-tips mb20">{{ creativeImage.tips }}</div>
        <div class="set-up-upload">
          <div class="upload-txt">上传图片</div>
          <div class="upload-img" @click="modalCreativePicTap">
            <i v-if="!creativeImage.img" class="iconfont icon-shangchuan1"></i>
            <img v-else :src="creativeImage.img" alt="" class="img" />
          </div>
          <!-- 明确的上传按钮 -->
          <div class="upload-button-container">
            <el-button size="small" type="primary" @click="modalCreativePicTap">选择文件</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 边距设置 -->
    <div class="set-up-item">
      <div class="set-up-title">边距设置</div>
      <div class="set-up-content">
        <div class="set-up-padding">
          <div class="set-up-padding-item">
            <div class="set-up-padding-txt">上边距</div>
            <div class="set-up-padding-content">
              <el-input-number
                v-model="upConfig.val"
                :min="upConfig.min"
                :max="upConfig.max"
                @change="handleChange"
                size="small"
              ></el-input-number>
              <div class="set-up-padding-unit">px</div>
            </div>
          </div>
          <div class="set-up-padding-item">
            <div class="set-up-padding-txt">下边距</div>
            <div class="set-up-padding-content">
              <el-input-number
                v-model="downConfig.val"
                :min="downConfig.min"
                :max="100"
                @change="handleChange"
                size="small"
              ></el-input-number>
              <div class="set-up-padding-unit">px</div>
            </div>
          </div>
          <div class="set-up-padding-item">
            <div class="set-up-padding-txt">左右边距</div>
            <div class="set-up-padding-content">
              <el-input-number
                v-model="lrConfig.val"
                :min="lrConfig.min"
                :max="lrConfig.max"
                @change="handleChange"
                size="small"
              ></el-input-number>
              <div class="set-up-padding-unit">px</div>
            </div>
          </div>
          <div class="set-up-padding-item">
            <div class="set-up-padding-txt">页面间距</div>
            <div class="set-up-padding-content">
              <el-input-number
                v-model="mbConfig.val"
                :min="mbConfig.min"
                :max="100"
                @change="handleChange"
                size="small"
              ></el-input-number>
              <div class="set-up-padding-unit">px</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 颜色设置 -->
    <div class="set-up-item">
      <div class="set-up-title">颜色设置</div>
      <div class="set-up-content">
        <div class="color-block">
          <div class="color-txt">背景颜色</div>
          <div class="color-content">
            <div class="color-box" v-if="bgColor.color">
              <div class="color-item" :style="{ backgroundColor: bgColor.color[0].item }" @click="isShow = true"></div>
              <el-color-picker
                v-model="bgColor.color[0].item"
                show-alpha
                @change="handleChange"
                :showPicker="isShow"
              ></el-color-picker>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 圆角设置 -->
    <div class="set-up-item">
      <div class="set-up-title">圆角设置</div>
      <div class="set-up-content">
        <div class="set-up-padding">
          <div class="set-up-padding-item">
            <div class="set-up-padding-txt">背景圆角</div>
            <div class="set-up-padding-content">
              <el-slider v-model="bgStyle.val" :min="bgStyle.min" :max="bgStyle.max" @change="handleChange"></el-slider>
              <div class="set-up-padding-value">{{ bgStyle.val }}px</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { mapState, mapGetters } from 'vuex';
export default {
  name: 'c_home_enroll',
  props: {
    num: { type: null },
    index: { type: null },
  },
  data() {
    return {
      upConfig: {},
      downConfig: {},
      lrConfig: {},
      mbConfig: {},
      bgStyle: {},
      bgColor: {},
      enrollImage: { info: [{ value: '' }] },
      creativeImage: { info: [{ value: '' }] },
      urlList: [],
      isShow: false,
    };
  },
  computed: {
    ...mapState('mobildConfig', ['defaultArray', 'configName']),
    // 基础数据
    pageData() {
      console.log(222, this.num);

      return this.$store.state.mobildConfig.defaultArray[this.num];
    },
  },
  watch: {
    pageData: {
      handler(nVal, oVal) {
        this.setConfig(nVal);
      },
      deep: true,
    },
  },
  created() {
    this.urlList = this.$store.state.mobildConfig.linkList;
  },
  mounted() {
    this.setConfig(this.pageData);
  },
  methods: {
    handleChange(img1) {
      this.isShow = false;
      // 将当前所有配置数据收集起来
      if (img1) this.enrollImage.img = img1;
      const configData = {
        ...this.pageData,
        upConfig: this.upConfig,
        downConfig: this.downConfig,
        lrConfig: this.lrConfig,
        mbConfig: this.mbConfig,
        bgStyle: this.bgStyle,
        bgColor: this.bgColor,
        enrollImage: this.enrollImage,
        creativeImage: this.creativeImage,
      };
      console.log('点击选择报名图片', configData, this.num);

      // 直接更新到store
      this.$store.commit('mobildConfig/UPDATEARR', { num: this.num, val: configData });
    },
    // 点击选择报名图片
    modalEnrollPicTap() {
      const _this = this;
      this.$modalUpload(
        function (img) {
          if (!img) return;
          _this.enrollImage.img = img[0].sattDir;
          _this.$forceUpdate();
          _this.handleChange(img[0].sattDir);
          _this.$message.success('选择图片成功');
        },
        false,
        'diy',
      );
    },
    // 点击选择创意图片
    modalCreativePicTap() {
      const _this = this;
      this.$modalUpload(
        function (img) {
          if (!img) return;
          _this.creativeImage.img = img[0].sattDir;
          _this.$forceUpdate();
          _this.handleChange();
          _this.$message.success('选择图片成功');
        },
        false,
        'diy',
      );
    },
    // 设置配置
    setConfig(data) {
      if (!data) return;

      // 安全赋值，确保所有属性都有默认值
      this.upConfig = data.upConfig || { val: 10, min: 0, max: 100 };
      this.downConfig = data.downConfig || { val: 10, min: 0, max: 100 };
      this.lrConfig = data.lrConfig || { val: 12, min: 0, max: 15 };
      this.mbConfig = data.mbConfig || { val: 0, min: 0, max: 100 };
      this.bgStyle = data.bgStyle || { val: 0, min: 0, max: 30 };

      // 确保bgColor有完整的结构
      this.bgColor = data.bgColor || { color: [{ item: '#FFFFFF' }] };
      if (!this.bgColor.color || !Array.isArray(this.bgColor.color)) {
        this.bgColor.color = [{ item: '#FFFFFF' }];
      } else if (this.bgColor.color.length === 0) {
        this.bgColor.color.push({ item: '#FFFFFF' });
      }

      // 确保enrollImage有完整的结构
      this.enrollImage = data.enrollImage || { img: '', info: [{ value: '' }] };
      if (!this.enrollImage.info || !Array.isArray(this.enrollImage.info)) {
        this.enrollImage.info = [{ value: '' }];
      } else if (this.enrollImage.info.length === 0) {
        this.enrollImage.info.push({ value: '' });
      }

      // 确保creativeImage有完整的结构
      this.creativeImage = data.creativeImage || { img: '', info: [{ value: '' }] };
      if (!this.creativeImage.info || !Array.isArray(this.creativeImage.info)) {
        this.creativeImage.info = [{ value: '' }];
      } else if (this.creativeImage.info.length === 0) {
        this.creativeImage.info.push({ value: '' });
      }
    },
  },
};
</script>
<style scoped lang="scss">
@import '../../styles/index.scss';

.set-up-wrapper {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.set-up-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: #fffbe6;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  color: #856404;
  font-size: 14px;
  margin-bottom: 16px;

  i {
    font-size: 16px;
    color: #f39c12;
  }
}

.set-up-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }
}

.set-up-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6e6e6;
}

.set-up-content {
  color: #666666;
}

.set-up-tips {
  font-size: 14px;
  color: #999999;
  margin-bottom: 16px;
  line-height: 1.5;
}

.set-up-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .upload-txt {
    font-size: 14px;
    margin-bottom: 8px;
    color: #666666;
  }

  .upload-img {
    width: 120px;
    height: 120px;
    border: 2px dashed #dcdfe6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fafafa;

    &:hover {
      border-color: #409eff;
      background-color: #ecf5ff;
    }

    i {
      font-size: 32px;
      color: #c0c4cc;
    }

    .img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 6px;
    }
  }
}

.upload-button-container {
  margin-top: 15px;
  text-align: left;
}

.set-up-padding {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.set-up-padding-item {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .set-up-padding-txt {
    font-size: 14px;
    color: #666666;
  }

  .set-up-padding-content {
    display: flex;
    align-items: center;
    gap: 8px;

    .set-up-padding-unit {
      font-size: 14px;
      color: #999999;
      min-width: 30px;
    }

    .set-up-padding-value {
      font-size: 14px;
      color: #409eff;
      font-weight: 500;
    }
  }
}

.color-block {
  display: flex;
  align-items: center;
  gap: 16px;

  .color-txt {
    font-size: 14px;
    color: #666666;
    min-width: 80px;
  }

  .color-content {
    display: flex;
    align-items: center;
    gap: 12px;

    .color-box {
      display: flex;
      align-items: center;
      gap: 12px;

      .color-item {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid #e6e6e6;
        transition: border-color 0.3s ease;

        &:hover {
          border-color: #409eff;
        }
      }
    }
  }
}

// 确保颜色选择器正确显示
::v-deep .el-color-picker {
  margin: 0;
}

// 优化滑块样式
::v-deep .el-slider {
  width: 100%;
  max-width: 200px;
}
</style>
